<template>
  <div id="container"
    class="res clearfix displayFlex flexSit space_betweens spaceSize dasAutoSlight unitKind allInRoll cnimaLoop bokAutoIn cnimaLoop bokAutoIn cfotkop animations">
    <div id="headerBox"
      class="flexSit space_betweens spaceSize dasAutoSlight unitKind  insideBoxes pace_betweens spaceSize res resexs absexs">
      <img src="~@/assets/img/zyy/header_bg.png" alt=""
        class="header flexSit space_betweens spaceSize dasAutoSlight unitKind  insideBoxes pace_betweens spaceSize abs absexs absexs">
    </div>
    <div
      class="contentBox dasAutoSlight unitKind  insideBoxe left_zgb abs absexs absexs space_betweens spaceSize space_between">
      <div
        class="contentBox_left displayFlex flexSit space_betweens spaceSize dasAutoSlight unitKind size100 res resexs relactive">
        <div
          class="contentBox_left_jryh size100 mt10 relactive displayFlex flexSit space_betweens spaceSize res resexs relactive">
          <div class="contentBox_left_jryh_toplan displayFlex flexSit space_between auto_cenp absactive">
            <div class="contentBox_left_jryh_toplan_lie displayFlex flexSit">
              <span class="DS-DIGIT"><i>556</i>个</span><br>
              <span>注册用户</span>
            </div>
            <div class="contentBox_left_jryh_toplan_lie displayFlex flexSit">
              <span class="DS-DIGIT"><i>556</i>个</span><br>
              <span>登录用户</span>
            </div>
            <div class="contentBox_left_jryh_toplan_lie displayFlex flexSit">
              <span class="DS-DIGIT"><i>556</i>个</span><br>
              <span>提交认证</span>
            </div>
          </div>
          <div
            class="contentBox_left_jryh_toplan contentBox_left_jryh_bottomlan displayFlex flexSit space_between auto_cenp absactive">
            <div class="contentBox_left_jryh_toplan_lie displayFlex flexSit">
              <span class="DS-DIGIT"><i>556</i>个</span><br>
              <span>已注册</span>
            </div>
            <div class="contentBox_left_jryh_toplan_lie displayFlex flexSit">
              <span class="DS-DIGIT"><i>556/156</i></span><br>
              <span>已认证/未认证</span>
            </div>
            <div class="contentBox_left_jryh_toplan_lie displayFlex flexSit">
              <span class="DS-DIGIT"><i>556</i>个</span><br>
              <span>总用户</span>
            </div>
          </div>
        </div>
        <div
          class="contentBox_left_jyz size100 mt10 relactive displayFlex flexSit space_betweens spaceSize res resexs relactive">
          <div id="contentBox_left_jyz_echarts" class="contentBox_left_jyz_echarts auto_m res resexs relactive"></div>
        </div>
        <div
          class="contentBox_left_jyzzc size100 mt10 relactive displayFlex flexSit space_betweens spaceSize res resexs relactive">
          <div id="contentBox_left_jyzzc_echarts" class="contentBox_left_jyz_echarts auto_m res resexs relactive"></div>
        </div>
      </div>
      <div
        class="contentBox_center displayFlex flexSit space_betweens spaceSize dasAutoSlight unitKind size100 res resexs relactive">
        <div
          class="contentBox_center_top displayFlex flexSit space_betweens spaceSize dasAutoSlight space_between res resexs">
          <div class="contentBox_center_top_lie displayFlex flexSit unitKind res res resexs relactive size100"><span
              class="displayFlex flexSit space_betweens auto_censp strongNum">556</span></div>
          <div class="contentBox_center_top_lie displayFlex flexSit unitKind res res resexs relactive size100"><span
              class="displayFlex flexSit space_betweens auto_censp strongNum">556</span></div>
          <div class="contentBox_center_top_lie displayFlex flexSit unitKind res res resexs relactive size100"><span
              class="displayFlex flexSit space_betweens auto_censp strongNum">556</span></div>
          <div class="contentBox_center_top_lie displayFlex flexSit unitKind res res resexs relactive size100"><span
              class="displayFlex flexSit space_betweens auto_censp strongNum">556</span></div>
        </div>
        <div
          class="contentBox_center_center displayFlex flexSit space_betweens spaceSize dasAutoSlight space_between res resexs mb10">
          <img src="~@/assets/img/zyy/map.png" class="map displayFlex flexSit unitKind auto_m" alt="">
        </div>
        <div
          class="contentBox_center_bottom displayFlex flexSit space_betweens spaceSize dasAutoSlight space_between res resexs size100">
          <div id="contentBox_center_bottom_echarts" class="contentBox_center_bottom_echarts auto_m res resexs relactive">
          </div>
        </div>
      </div>
      <div
        class="contentBox_right displayFlex flexSit space_betweens spaceSize dasAutoSlight unitKind size100 res resexs relactive">
        <div
          class="contentBox_right_ycpz mb10 flexSit space_betweens spaceSize dasAutoSlight size100 res reslative resex">
          <div class="contentBox_right_ycpz_yczl flexSit abs abses absolute unitkindom space">
            <span>药材种类</span><br><span class="strongNum">5</span>
          </div>
          <div class="contentBox_right_ycpz_ycpz flexSit abs abses absolute unitkindom space">
            <span>药材品种</span><br><span class="strongNum">666</span>
          </div>
        </div>
        <div
          class="contentBox_right_rmycyh mb10 flexSit space_betweens spaceSize dasAutoSlight size100 res reslative resex">
          <div id="contentBox_right_rmycyh_echarts"
            class="contentBox_right_rmycyh_echarts auto_cenp flexSit space_betweens spaceSize dasAutoSlight"></div>
          <div class="contentBox_right_rmycyh_tab abs absexes space_betweens space_between spaceSize dasAutoSlight">
            <div class="contentBox_right_rmycyh_tabbut size100 currentTab">供应排行</div>
            <div class="contentBox_right_rmycyh_tabbut size100">采购排行</div>
          </div>
        </div>
        <div class="contentBox_right_rmyc flexSit space_betweens spaceSize dasAutoSlight size100 res reslative resex">
          <div id="contentBox_right_rmyc_echarts" class="contentBox_right_rmyc_echarts auto_cenp absexes space_betweens space_between spaceSize dasAutoSlight">
            <div class="wrapper">
                <div class="tagcloud" style="visibility: visible; position: relative; min-height: 336px; min-width: 700px;">
                  <!-- bo大小 co颜色 -->
                  <a class="b01 co01" href="#"><span>麻黄</span></a>
                  <a class="b02 co02" href="#"><span>生姜</span></a>
                  <a class="b03 co03" href="#"><span>桂枝</span></a>
                  <a class="b04 co04" href="#"><span>紫苏</span></a>
                  <a class="b01 co05" href="#"><span>刀豆</span></a>
                  <a class="b02 co06" href="#"><span>三七</span></a>
                  <a class="b03 co07" href="#"><span>细辛</span></a>
                  <a class="b04 co01" href="#"><span>紫苏</span></a>
                  <a class="b01 co02" href="#"><span>刀豆</span></a>
                  <a class="b02 co03" href="#"><span>麻黄</span></a>
                  <a class="b03 co04" href="#"><span>生姜</span></a>
                </div>
            </div>
          </div>
          <div class="contentBox_right_rmycyh_tab abs absexes space_betweens space_between spaceSize dasAutoSlight">
            <div class="contentBox_right_rmycyh_tabbut size100 currentTab">供应</div>
            <div class="contentBox_right_rmycyh_tabbut size100">采购</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
import $ from 'jquery'
export default {
  data() {
    return {
      pageTitle: '大数据'
    };
  },
  beforeCreate() {
    this.rootSize();
  },
  created() {
    // 组件创建时执行的逻辑
  },
  mounted() {
    this.jyz();
    this.jyzzc();
    this.pzfx();
    this.rmycyh();
    this.rmyc();
    
  },
  methods: {
    logout() {
      // 登出逻辑
    },
    jyz() {
      let chartDom = document.getElementById('contentBox_left_jyz_echarts');
      let myChart = echarts.init(chartDom);

      let option = {
        title: {
          text: '数量',
          textStyle: {
            color: "#fff",
            fontSize: 12
          },
          left: '2.5%',
          top: 0
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['Search Engine'],
          show: false
        },
        // toolbox: {
        // feature: {
        //       saveAsImage: {}
        // }
        // },
        grid: {
          top: '18.5%',
          left: '0',
          right: '0',
          bottom: '2.5%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
            axisLabel: {
              textStyle: {
                color: "#fff",
              }
            },
            axisLine: {
              //轴线
              show: true,
              lineStyle: {
                color: "rgba(154, 199, 255, .1)",
              }
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '数量',
            axisLabel: {
              textStyle: {
                color: "#fff",
              }
            },
            axisLine: {
              //轴线
              show: true,
              lineStyle: {
                color: "rgba(154, 199, 255, .1)",
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["rgba(154, 199, 255, .1)"],
                width: 1,
              },
            },
          }
        ],
        series: {
          name: '数量',
          smooth: true,
          type: 'line',
          stack: 'Total',
          label: {
            show: true,
            position: 'top'
          },
          showSymbol: false,
          lineStyle: {
            normal: {
              color: "rgba(14, 95, 255, 1)",
              width: 3
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [{
                  offset: 0,
                  color: "rgba(18, 155, 255, 1)"
                },
                {
                  offset: 1,
                  color: "rgba(17, 70, 139, 0)"
                }
                ],
                false
              )
            }
          },
          emphasis: {
            focus: 'series'
          },
          data: [10, 90, 50, 30, 90, 20, 70]
        }
      };


      option && myChart.setOption(option);

      $(document).ready(function () {
        myChart.resize()
      });
      window.addEventListener("resize", function () {
        myChart.resize()
      })
    },
    jyzzc() {
      let chartDom = document.getElementById('contentBox_left_jyzzc_echarts');
      let myChart = echarts.init(chartDom);

      let option = {
        title: {
          text: '数量',
          textStyle: {
            color: "#fff",
            fontSize: 12
          },
          left: '2.5%',
          top: 0
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['Search Engine'],
          show: false
        },
        // toolbox: {
        // feature: {
        //       saveAsImage: {}
        // }
        // },
        grid: {
          top: '18.5%',
          left: '0',
          right: '0',
          bottom: '2.5%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
            axisLabel: {
              textStyle: {
                color: "#fff",
              }
            },
            axisLine: {
              //轴线
              show: true,
              lineStyle: {
                color: "rgba(154, 199, 255, .1)",
              }
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '数量',
            axisLabel: {
              textStyle: {
                color: "#fff",
              }
            },
            axisLine: {
              //轴线
              show: true,
              lineStyle: {
                color: "rgba(154, 199, 255, .1)",
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["rgba(154, 199, 255, .1)"],
                width: 1,
              },
            },
          }
        ],
        series: {
          name: '数量',
          smooth: true,
          type: 'line',
          stack: 'Total',
          label: {
            show: true,
            position: 'top'
          },
          showSymbol: false,
          lineStyle: {
            normal: {
              color: "rgba(138, 56, 245, 1)",
              width: 3
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [{
                  offset: 0,
                  color: "rgba(138, 56, 245, 1)"
                },
                {
                  offset: 1,
                  color: "rgba(17, 70, 139, 0)"
                }
                ],
                false
              )
            }
          },
          emphasis: {
            focus: 'series'
          },
          data: [10, 90, 50, 30, 90, 20, 70]
        }
      };


      option && myChart.setOption(option);

      $(document).ready(function () {
        myChart.resize()
      });
      window.addEventListener("resize", function () {
        myChart.resize()
      })
    },
    pzfx() {
      let chartDom = document.getElementById('contentBox_center_bottom_echarts');
      let myChart = echarts.init(chartDom);

      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        grid: {
          left: '0%',
          right: '0%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          show: false,
          feature: {
            dataView: {
              show: true,
              readOnly: false
            },
            magicType: {
              show: true,
              type: ['line', 'bar']
            },
            restore: {
              show: true
            },
            saveAsImage: {
              show: true
            }
          }
        },
        legend: {
          textStyle: {
            color: "#00ffff"
          },
          data: ['供', '需'],
          top: "5%",
          itemWidth: 12,
          itemHeight: 12
        },
        xAxis: [{
          type: 'category',
          data: ["丁亚", "白贵", "荆贵", "丁亚", "白贵", "荆贵", "丁亚", "白贵", "荆贵"],
          axisLabel: { //x轴文字的配置
            textStyle: {
              color: "#fff",
            }
          },
          axisLine: {
            //轴线
            show: true,
            lineStyle: {
              color: "rgba(154, 199, 255, .1)",
            }
          },
          axisTick: {
            show: false
          },
          axisPointer: {
            type: 'shadow'
          }
        }],
        yAxis: [{
          type: 'value',
          splitLine: {
            // 网格线
            show: true,
            lineStyle: {
              color: ["rgba(154, 199, 255, .1)"],
              width: 1,
            },
          },
          axisTick: {
            //y轴刻度
            show: true,
            textStyle: {
              color: "#3fa0a6",
            }
          },
          axisLine: {
            //轴线
            show: false,
            // lineStyle: {
            //   color: "rgba(25, 35, 57,1)",
            // },
          },
          name: '',
          min: 0,
          // max: 250,
          interval: 10,
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: "#fff",
            }
          }
        }],
        series: [{
          name: '供',
          type: 'bar',
          barWidth: 12,
          itemStyle: {
            normal: {
              show: true,
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0.01,
                color: 'rgba(42, 114, 255, 0)'
              },
              {
                offset: 1,
                color: 'rgba(50, 119, 255, 1)'
              }
              ]),
              barBorderRadius: [0, 0, 0, 0],
              borderWidth: 0,
            },
          },
          tooltip: {
            valueFormatter: function (value) {
              return value + ' 次';
            }
          },
          data: [88, 88, 88, 88, 88, 88, 88, 88, 88]
        },
        {
          name: '需',
          type: 'bar',
          barWidth: 12,
          itemStyle: {
            normal: {
              show: true,
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0.01,
                color: 'rgba(15, 255, 223, 0)'
              },
              {
                offset: 1,
                color: 'rgba(15, 255, 223, 1)'
              }
              ]),
              barBorderRadius: [0, 0, 0, 0],
              borderWidth: 0,
            },
          },
          tooltip: {
            valueFormatter: function (value) {
              return value + ' 次';
            }
          },
          data: [88, 88, 88, 88, 88, 88, 88, 88, 88]
        }
        ]
      };


      option && myChart.setOption(option);

      $(document).ready(function () {
        myChart.resize()
      });
      window.addEventListener("resize", function () {
        myChart.resize()
      })
    },
    rmycyh() {
      let chartDom = document.getElementById('contentBox_right_rmycyh_echarts');
      let myChart = echarts.init(chartDom);

      let option = {
        // 标题
        title: {
          text: '横向柱状图示例',
          show: false
        },
        // 提示框
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '0%',
          right: '0%',
          top: '0%',
          bottom: '3%',
          containLabel: true
        },
        // 图例
        legend: {
          show: false,
          data: ['销量']
        },
        // 直角坐标系内的x轴
        xAxis: {
          type: 'value',
          position: 'bottom',
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: "rgba(255, 255, 255, 0.85)",
            }
          },
          axisLine: {
            show: false
          },
          splitLine: {
            // 网格线
            show: true,
            lineStyle: {
              color: ["rgba(154, 199, 255, .1)"],
              width: 1,
            },
          },
        },
        // 直角坐标系内的y轴
        yAxis: {
          type: 'category',
          data: ['麻黄', '桂枝', '紫苏', '生姜', '荆芥', '防风', '羌活', '细辛'],
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: "rgba(255, 255, 255, 0.85)",
            }
          },
          axisLine: {
            show: false
          }
        },
        // 系列列表
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [1200, 2000, 1500, 800, 1200, 2000, 1500, 800],
            barWidth: '12',
            // barMaxWidth: 20,
            label: {
              show: true,
              position: 'right',
              formatter: '{c}',
              color: "rgba(255, 255, 255, 0.85)"
            },
            itemStyle: {
              color: 'rgba(18, 155, 255, 1)'
            }
          }
        ]
      };


      option && myChart.setOption(option);

      $(document).ready(function () {
        myChart.resize()
      });
      window.addEventListener("resize", function () {
        myChart.resize()
      })
    },
    rmyc() {
      tagcloud({
          selector: ".tagcloud", 
          fontsize: 36,  
          radius: 160,        
          mspeed: "slow",  
          ispeed: "slow",   
          direction: 135,     
          keep: false         
      });
    }  
  }
};
</script>
<style lang="scss">
@import url("../../assets/bigdataStyle1/css/animate.css");
@import url("../../assets/bigdataStyle1/css/common.css");
@import url("../../assets/bigdataStyle1/css/comon0.css");
@import url("../../assets/bigdataStyle1/css/Bubble.css");

$tcbgOpacity: 0.8;
$textColor: rgb(25, 236, 255);
$textColor2: rgb(25, 180, 189);
$textColorHd: rgba(25, 236, 255, 0.6);
$textFontSizeBigS: 0.18rem;
$textFontSizeBig: 0.17rem;
$textFontSizeSm: 0.15rem;
$textFontSizeSmV: 0.14rem;
$textFontSizeSmS: 0.12rem;

#container {
  .strongNum {
    font-family: 'strongNum';
  }

  .DS-DIGIT {
    font-family: 'DS-DIGIT';
  }

  width: 100%;
  min-height: 11.25rem;
  background: url(~@/assets/img/zyy/bigdata_bg.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;

  .mb10 {
    margin-bottom: .1042rem;
  }

  #headerBox {
    width: 100%;
    height: 1.125rem;

    &>img {
      left: 0;
      top: 0;
    }
  }

  .contentBox {
    width: 100%;
    box-sizing: border-box;
    height: auto;
    padding: 0 .2604rem;

    &_left {
      width: 4.9792rem;
      height: auto;

      &_jryh {
        width: 100%;
        height: 3.2083rem;
        background: url(~@/assets/img/zyy/jryh_bg.png);
        background-repeat: no-repeat;

        &_toplan {
          width: 4.3958rem;
          height: .7292rem;
          top: 0.7rem;

          &_lie {
            width: 1.3542rem;
            height: .7292rem;
            text-align: center;
            padding-top: .08rem;

            & span:nth-child(1) {
              font-size: .1875rem;
              color: #66FFFF;
              line-height: 0.35rem;

              i {
                font-size: .2292rem;
                letter-spacing: 1px;
              }
            }

            & span:nth-child(3) {
              font-size: .1458rem;
              color: #FFFFFF;
              letter-spacing: 1px;
            }
          }
        }

        &_bottomlan {
          top: 2.29rem;
        }
      }

      &_jyz {
        width: 100%;
        height: 3.2083rem;
        background: url(~@/assets/img/zyy/jyz_bg.png);
        background-repeat: no-repeat;

        #contentBox_left_jyz_echarts {
          width: 4.6042rem;
          height: 2.0833rem;
          top: .9688rem;
        }
      }

      &_jyzzc {
        width: 100%;
        height: 3.2083rem;
        background: url(~@/assets/img/zyy/jyzzc_bg.png);
        background-repeat: no-repeat;

        #contentBox_left_jyzzc_echarts {
          width: 4.6042rem;
          height: 2.0833rem;
          top: .9688rem;
        }
      }
    }

    &_center {
      width: 9.3125rem;
      height: auto;

      &_top {
        padding: 0 .7292rem;
        padding-top: .3438rem;
      }

      &_top_lie {
        width: 1.6667rem;
        height: 1.6667rem;

        span {
          font-size: .5rem;
          color: #FFFFFF;
          letter-spacing: 1px;
          margin-top: -0.025rem;
        }
      }

      &_top_lie:nth-child(1) {
        background: url(~@/assets/img/zyy/gypz_icon.png);
        background-repeat: no-repeat;
      }

      &_top_lie:nth-child(2) {
        background: url(~@/assets/img/zyy/gyxx_icon.png);
        background-repeat: no-repeat;
      }

      &_top_lie:nth-child(3) {
        background: url(~@/assets/img/zyy/cgpz_icon.png);
        background-repeat: no-repeat;
      }

      &_top_lie:nth-child(4) {
        background: url(~@/assets/img/zyy/cgxx_icon.png);
        background-repeat: no-repeat;
      }

      &_center {
        width: 100%;
        height: 4.61rem;

        .map {
          height: 4.6rem;
        }
      }

      &_bottom {
        width: 100%;
        height: 3.2083rem;
        background: url(~@/assets/img/zyy/ycfx_bg.png);
        background-repeat: no-repeat;

        #contentBox_center_bottom_echarts {
          width: 8.88rem;
          height: 2.4rem;
          top: .6688rem;
        }
      }
    }

    &_right {
      width: 4.9792rem;
      height: 500px;

      &_rmycyh {
        width: 4.9792rem;
        height: 4.155rem;
        background: url(~@/assets/img/zyy/rmycyh_bg.png);
        background-repeat: no-repeat;

        &_echarts {
          width: 4.6rem;
          height: 3rem;
          top: 0.9rem;
        }

        &_tab {
          right: 0rem;
          top: 0.25rem;
        }

        &_tabbut {
          width: .8708rem;
          height: .32rem;
          line-height: .36rem;
          text-align: center;
          font-size: 12px;
          color: #FFFFFF;
          margin-right: 10px;
          background: url(~@/assets/img/zyy/wxz.png);
          background-repeat: no-repeat;
          cursor: pointer;
        }

        &_tabbut.currentTab {
          background: url(~@/assets/img/zyy/xz.png);
          background-repeat: no-repeat;
        }
      }

      &_rmyc {
        width: 4.9792rem;
        height: 3.2083rem;
        background: url(~@/assets/img/zyy/rmyc_bg.png);
        background-repeat: no-repeat;

        &_echarts {
          width: 4.6rem;
          height: 2.48rem;
          top: 0.6rem;
          overflow: hidden;
        }
      }

      .contentBox_right_ycpz {
        width: 4.9792rem;
        height: 2.3958rem;
        background: url(~@/assets/img/zyy/ycpz_bg.png);
        background-repeat: no-repeat;

        &_yczl {
          width: .85rem;
          height: 0.8rem;
          left: 1.5rem;
          top: 1.2rem;

          span:nth-child(1) {
            font-size: .1875rem;
            color: #B1D6FF;
            letter-spacing: 1px;
          }

          span:nth-child(3) {
            font-size: .4167rem;
            color: #fff;
            line-height: .5729rem;
          }
        }

        &_ycpz {
          width: .85rem;
          height: 0.8rem;
          left: 3.6rem;
          top: 1.2rem;

          span:nth-child(1) {
            font-size: .1875rem;
            color: #B1D6FF;
            letter-spacing: 1px;
          }

          span:nth-child(3) {
            font-size: .4167rem;
            color: #fff;
            line-height: .5729rem;
          }
        }
      }
    }
  }
}</style>

<style></style>